---
import { getCollection } from 'astro:content'

const projects = await getCollection('projects')
---

<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-8">
  {
    projects.map((project) => (
      <li>
        <a href={project.data.link} target="_blank" rel="noopener noreferrer external">
          <div class="rounded-lg bg-accent/10 overflow-hidden group">
            <div class="aspect-video overflow-hidden">
              <img
                class="size-full object-cover transition-transform group-hover:scale-110"
                src={project.data.image}
                alt={`Project cover: ${project.data.title}`}
                loading="lazy"
              />
            </div>
            <div class="p-4">
              <div class="group-hover:text-accent">
                <span class="text-xl font-bold">{project.data.title}</span>
                <i class="ml-2 iconfont icon-external-link" />
              </div>
              <p class="mt-2 text-sm line-clamp-2">{project.data.description}</p>
            </div>
          </div>
        </a>
      </li>
    ))
  }
</ul>
